<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="__PUBLIC__/styles/home.css">
	<script src="__PUBLIC__/scripts/jquery.min.js"></script>
	<script src="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
	<div data-role="page">
		<include file="Common:toolbar" title="购物车"/>
		<include file="Common:menu" />

		<!--  start main  -->
		<main data-role="main" class="ui-content">
			<hr />
			<volist id="book" name="books">
			<div id="{$book.bookId}" class="book-info" >
				<div class="book-cover" style="display: inline-block;">
					<img src="__ROOT__/Uploads/{$book.location}">
				</div>
				<div class="book-other" style="display: inline-block;">
					<div><b>《{$book.name}》</b></div>
					<div>销售价：<span class="color-red font-solid">￥<span id="price-now-{$book.bookId}">{$book.price_now}</span></span></div>
					<div>邮费：￥0</div>
					<div>
						<span>数量：</span>
						<a id="sub-{$book.bookId}" href="javascript:void(0)" onclick="sub({$book.bookId})">-</a>
						<input id="book-number-{$book.bookId}" class="number-input" type="text" data-role="none" value="{$book.bookNum}" >
						<a id="add-{$book.bookId}" href="javascript:void(0)" onclick="add({$book.bookId})">+</a>
					</div>
					<div>
						<span>库存：<span id="book-total-{$book.bookId}">{$book.total_count}</span></span>
						<span class="del"><a href="#">删除</a></span>
					</div>
				</div>
			</div>
			<hr />
			</volist>
			
			<div class="book-total">
				<span>商品总数：<span class="color-red">{:count($books)}</span></span>
				<span>商品总额：<span class="color-red price-total">￥</span></span>
			</div>
			<div class="book-operation">
				<div class="btn-box">
					<a href="/Home/Main/index.html"  class="ui-btn ui-btn-inline">继续购物</a>
					<a href="/Home/Main/address.html" class="ui-btn ui-btn-inline">下单结算</a>
				</div>
			</div>
	
		</main> <!-- // end main-->


		
	<script>

		function add(id) {
			var value = $("#book-number-"+id).val();
			var total = parseInt($("#book-total-"+id).html());

			if (value < total) {
				value ++;
				$("#book-number-"+id).val(value);
				cal();
			}
		}

		function sub(id) {
			var value = $("#book-number-"+id).val();
			if (value >  1) {
				value--;
				$("#book-number-"+id).val(value);
				$.post('/Home/Cookie/setNumById.html', 
					{
						"bookId":  id,
						"bookNum": value
					},  function(text, status) {
						cal();
					});
			}
		}

		function cal() {
			var total = 0;
			$(".book-info").each(function(index, ele) {
				var id = this.id;
				var bookPrice = parseFloat($("#price-now-"+id).html());
				var bookNum = $("#book-number-"+id).val();

				total += (bookPrice * bookNum);
			});

			$(".price-total").html("￥" + total + " RMB ");
		}


		function addLoadEvent(func) {
			var oldonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			} else {
				window.onload = function() {
					oldonload();
					func();
				};
			}
		}


		addLoadEvent(cal);


	</script>

	</div>



</body>